<template>
  <div class="branch-box-wrap">
    <div class="branch-box">
      <div class="add-branch" @click="addBranch">添加条件</div>
      <div class="col-box" v-for="(obj, i) in node.conditionNodes" :key="i">
        <div class="branch-item">
          <NodeItem :node="obj"></NodeItem>
        </div>
        <div v-if="i === 0" class="top-left-cover-line"></div>
        <div v-if="i === 0" class="bottom-left-cover-line"></div>
        <div
          v-if="node.conditionNodes && i === node.conditionNodes.length - 1"
          class="top-right-cover-line"
        ></div>
        <div
          v-if="node.conditionNodes && i === node.conditionNodes.length - 1"
          class="bottom-right-cover-line"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { NodeItem } from '../../types'
import * as utils from '../../FlowPanel'
const { addNode } = inject<{ addNode: (node: NodeItem) => void }>('flowTree', {
  addNode: () => {}
})
const props = defineProps({
  node: {
    type: Object as () => NodeItem,
    default: () => {
      return {
        name: '',
        type: 4,
        conditionNodes: {}
      }
    }
  },
  prevId: {
    type: String,
    default: () => {
      return ''
    }
  }
})
// 添加条件分支
const addBranch = () => {
  const obj: NodeItem = utils.createNode()
  obj.type = 3
  obj.name = '条件'
  obj.nodeId = 'condition-' + new Date().getTime()
  obj.prevId = props.prevId
  addNode(obj)
}
</script>